<template>
	<div class="product-list">
		<!--搜索表单-->
		<div class="common-seach-wrap">
			

			<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">

				<!-- <el-form-item label="接龙编号">
					<el-input size="small" clearable v-model="searchForm.tuan_no" placeholder="请输入"></el-input>
				</el-form-item> -->

				<!-- <el-form-item label="供应商名称">
					<el-input size="small" clearable v-model="searchForm.tuan_name"  placeholder="请输入"></el-input>
				</el-form-item> -->

				<!-- <el-form-item label="供应商电话">
					<el-input size="small" clearable v-model="searchForm.tuan_name"  placeholder="请输入"></el-input>
				</el-form-item> -->

				<el-form-item>
					<el-button size="small" type="primary" icon="Search" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="product-content">
			<div class="table-wrap">
				<el-table ref="table" size="small" :data="tableData" border style="width: 100%" v-loading="loading"
				>
					>
					<el-table-column type="index"  width="50" label="序号" align="center"  />
					<el-table-column prop="name" label="供应商" align="center" width="120">
						<template #default="scope">
							{{ scope.row.shareSupplierInfo.name }} 
						</template>
					</el-table-column>
					<el-table-column prop="name" label="供应商联系方式" align="center" width="120">
						<template #default="scope">
							{{ scope.row.shareSupplierInfo.link_phone }}
						</template>
					</el-table-column>
					<el-table-column prop="tuan_no" label="接龙编号" align="center" width="120"></el-table-column>
					<el-table-column prop="name" label="接龙名称" align="center"></el-table-column>
					<el-table-column prop="img" label="接龙图片" align="center">
						<template #default="scope">
							<img :src="scope.row.img" style="width: 50px; margin:auto">
						</template>
					</el-table-column>
					<el-table-column prop="time_start" label="接龙开始时间" align="center" width="150">
					</el-table-column>
					<el-table-column prop="time_end" label="接龙截止时间" align="center" width="150">
					</el-table-column>
					<!-- <el-table-column prop="order_status_str" label="接龙订单状态" align="center">
					</el-table-column>
					<el-table-column prop="time_state_str" label="接龙发布状态" align="center">
					</el-table-column> -->

					<el-table-column fixed="right" label="操作" align="center" width="270">
						<template #default="scope" >
							<div>
								<span v-if="scope.row.order_status_str == '下单中' ">
									<el-button v-if="scope.row.order_status_str.name != '已关闭'"  @click="closetuan(scope.row.id, 1)" link
									type="danger" size="small" >关闭</el-button> 

									<el-button v-else   @click="closetuan(scope.row.id, 0)" link
									type="primary" size="small" >开启</el-button> 
								</span>
								
								<el-button @click="goOrder(scope.row)" link type="primary" size="small"
									>查看订单</el-button>

							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!--分页-->
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
				:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
				:total="totalDataNumber"></el-pagination>
		</div>
	</div>
</template>

<script>
import {
	accept_list,
	apiClosetuan,
} from "@/api/tuan.js";

import { isExcelFile } from "@/utils/validate.js";
export default {
	components: {},
	data() {
		return {
			/*切换菜单*/
			activeName: "sell",
			/*切换选中值*/
			activeIndex: "0",
			/*是否正在加载*/
			loading: true,
			/*一页多少条*/
			pageSize: 10,
			/*一共多少条数据*/
			totalDataNumber: 0,
			/*当前是第几页*/
			curPage: 1,
			/*搜索参数*/
			searchForm: {
				tuan_name: "", //接龙名称
				tuan_no: "", //接龙编号
				order_status: '', //接龙订单状态
				tuan_status: '',   // 接龙发布状态

			},
			/*列表数据*/
			tableData: [],
			/*全部分类*/
			categoryList: [],
			supplier: [],
			/*统计数据*/
			product_count: {},
			// 列表选中项
			selectedRows: [],

			// 接龙订单状态
			orderStatusOptions: [
                { label: "下单中", value: 10 },
                { label: "待发货", value: 20 },
                { label: "已发货", value: 30 },
                { label: "已到货", value: 40 },
            ],
            // 接龙发布状态
            publishStatusOptions: [
                { label: "未发布", value: 1 },
                { label: "已发布", value: 2 },
				{ label: "已结束", value: 3 },
            ],
		};
	},
	created() {
		/*获取列表*/
		this.getList();
	},
	methods: {
		goOrder(e){
			this.$router.push({
				path: "/order/order/index",
				query: {
					tuan_no: e.tuan_no,
				},
			});
		},
		// 关闭开启接龙
		async closetuan(id,type) {
			let params = {
				id: id,
				stat: type
			}
			let data = await apiClosetuan(params);
			if (data.code == 1) {
				this.getList()
			} else {
				ElMessage.error(data.msg);
			}
		},

		// 获取列表
		async getList() {
			let params = {
				...this.searchForm,
				page: this.curPage,
				list_rows: this.pageSize
			}
			this.loading = true;
			let data = await accept_list(params);
			console.log(data)
			if (data.code == 1) {
				console.log(data.data)
				this.loading = false;
				// let list = data.data.share_tuan_list
				//  let arr = []
				// for(let i = 0 ; i<list.length; i++){
				// 	let item = list[i].share_tuan_list
				// 	console.log(item)
				// 	for(let j = 0 ; j<item.length;j++){
				// 		item[j].share_supplier_name = list[i].share_supplier_name
				// 		item[j].share_supplier_remark = list[i].share_supplier_remark
				// 		item[j].share_supplier_id = list[i].share_supplier_id
				// 		arr.push(item[j])
				// 	}
				// }
			


				this.tableData = data.data.data
				this.totalDataNumber = data.data.total;
			} else {
				ElMessage.error(data.msg);
			}
		},

		/*选择第几页*/
		handleCurrentChange(val) {
			let self = this;
			self.loading = true;
			self.curPage = val;
			self.getList();
		},

		/*每页多少条*/
		handleSizeChange(val) {
			this.pageSize = val;
			this.getList();
		},

		/*搜索查询*/
		onSubmit() {
			this.curPage = 1;
			this.getList();
		},


		/*打开编辑*/
		editClick(row) {
			this.$router.push({
				path: "/product/product/edit",
				query: {
					product_id: row.product_id,
					scene: "edit",
				},
			});
		},

		/*打开复制*/
		copyClick(row) {
			this.$router.push({
				path: "/product/product/edit",
				query: {
					product_id: row.product_id,
					scene: "copy",
				},
			});
		},

	
		
	},
};
</script>

<style>
.head-part {
	display: flex;
	align-items: center;
}

.el-form-item--small .el-form-item__content {
    line-height: 1 !important;
}
</style>
